<script setup lang="ts">
import SocialAccountFormPanel from './SocialAccountFormPanel.vue'
import { SocialAccountApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: 'SocialAccount' })

const userStore = useUserStore()
const queryForm = reactive<SocialAccountApi.SocialAccountQuery>({
  userType: undefined,
  userId: undefined,
  source: undefined,
  openId: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => SocialAccountApi.getPage({ ...queryForm, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: 'id', dataIndex: 'id', slotName: 'id', ellipsis: true, tooltip: true },
  { title: '用户类型', dataIndex: 'userType', slotName: 'userType', ellipsis: true, tooltip: true },
  { title: '用户id', dataIndex: 'userId', slotName: 'userId', ellipsis: true, tooltip: true },
  { title: '来源', dataIndex: 'source', slotName: 'source', ellipsis: true, tooltip: true },
  { title: '开放id', dataIndex: 'openId', slotName: 'openId', ellipsis: true, tooltip: true },
  { title: '附加信息', dataIndex: 'metadata', slotName: 'metadata', ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:socialAccount:write']),
  },
]

// 删除
const onDelete = (item: SocialAccountApi.SocialAccountResp) => {
  return handleDelete(() => SocialAccountApi.remove(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

const SocialAccountFormPanelRef = ref<InstanceType<typeof SocialAccountFormPanel>>()
// 新增
const onAdd = () => {
  SocialAccountFormPanelRef.value?.create()
}

// 详情
const onDetail = (row) => {
  SocialAccountFormPanelRef.value?.open(row.id)
}
</script>

<template>
  <ProPage title="社交账户管理" description="对社交账户进行统一管理">
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
      @row-click="onDetail"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.userType" placeholder="请输入用户类型" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-input v-model="queryForm.userId" placeholder="请输入用户id" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-input v-model="queryForm.source" placeholder="请输入来源" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-input v-model="queryForm.openId" placeholder="请输入开放id" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['system:socialAccount:write']" type="primary" @click="onAdd">
          <template #icon>
            <icon-plus />
          </template>
          <span>创建</span>
        </a-button>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:socialAccount:write']" status="danger" @click="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <SocialAccountFormPanel ref="SocialAccountFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
